/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="mount-dataset-page">
        <div ref="left" class="mount-dataset-page__left">
            <div class="mount-dataset-page__alert">
                <i class="sf-comp-iconfont icon-comp-lamp-tip"></i>
                <div class="alert-text">数据集文件将会被挂载到 CodeStudio 的特定文件目录下：/mnt/datasets/
                </div>
            </div>
            <div class="mount-dataset-left__radios">
                <sf-radio-group v-model="searchParams.queryType" @change="changeForUpdate">
                    <sf-radio-button check-value="all">我的数据集</sf-radio-button>
                    <sf-radio-button check-value="public">公共数据集</sf-radio-button>
                </sf-radio-group>
                <sf-searchfield v-model="searchParams.searchKeyword"
                                placeholder="请输入关键字"
                                default-width="200"
                                @trigger="changeForUpdate"/>
            </div>
            <div class="mount-dataset-left__list">
                <div style="height: calc(100% - 48px);">
                    <div v-for="item in datasetList" :key="item.data_id" class="mount-dataset-list__item">
                        <div class="list-item__left">
                            <div :title="item.data_id" class="item-data__title sfv-ellipsis">
                                {{ item.data_id }}
                            </div>
                            <div class="item-data__other">
                                <span class="other-source">来源：{{ SOURCE_MAP[item.source] }}</span>
                                <span class="other-size">{{ item.size === 0 ? 1 : item.size }}M</span>
                            </div>
                        </div>
                        <div class="list-item__right">
                            <sf-button-primary @click="_mountItem(item)">Mount</sf-button-primary>
                        </div>
                    </div>
                </div>
                <div class="list-paging-bar">
                    <span class="paging-bar__total">共{{ datasetTotal }}个数据集</span>
                    <sf-paging-bar ref="pagingbar"
                                   v-model="searchParams.page"
                                   class="paging-bar__pager"
                                   :pager-count="5"
                                   :page-size="searchParams.pageSize"
                                   :layout="['pager']"
                                   @pagechange="pageChange"/>
                </div>
            </div>
        </div>
        <div ref="right" class="mount-dataset-page__right">
            <div class="right-title">
                已挂载{{ mountedTotal }}个数据集
            </div>
            <div class="right-list">
                <div v-for="item in mountedList" :key="item.data_id" class="right-list__item">
                    <div class="list-item">
                        <div class="item-data__title">
                            <span>{{ item.dataset }}</span>
                            <i class="sf-comp-iconfont icon-comp-tip-close" @click="_deleteMount(item)"></i>
                        </div>
                        <div class="item-data__other">
                            <span class="other-source">来源：{{ SOURCE_MAP[item.source] }}</span>
                            <span :class="statusMap[item.status].cls" class="status-text">
                                <i v-if="statusMap[item.status].icon!==''"
                                   class="iconfont"
                                   :class="statusMap[item.status].icon"></i>
                                <span>{{ statusMap[item.status].text }}</span>
                            </span>
                            <span class="other-size">大小：{{ item.size === 0 ? 1 : item.size }}M</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import store from 'src/vuex/store';
import IntervalTask from 'src/util/interval_task';

let userID = store.state.userId;
const mountStatus={
    fail : -1,
    mounting : 0,
    success : 1,
}
export default {
    mounted() {
        if (!this.url) {
            return
        }
        this._createIntervalTask()
    },
    data() {
        return {
            searchParams: {
                searchKeyword: '',
                queryType: 'all',
                page: 1,
                pageSize: 6// 固定六条
            },
            mountedList: [],
            mountedTotal: 0,
            datasetList: [],
            datasetTotal: 0,
            url: ''
        }
    },
    computed: {
        SOURCE_MAP() {
            return {
                'personal': _('私人'),
                'shared': _('分享'),
                'public': _('公共')
            }
        },
        statusMap(){
            return {
                [mountStatus.fail]:{
                    text: _('挂载失败'),
                    icon:'iconcross-circle icon iconfont',
                    cls:'sv-file'
                },
                [mountStatus.mounting]:{
                    text: _('挂载中'),
                    icon:'iconjiazaiicon icon iconfont',
                    cls:'sv-loading',
                },
                [mountStatus.success]:{
                    text: _('挂载成功'),
                    icon:'',
                    cls:'sv-running'
                },
            }
        }
    },
    watch: {
        url() {
            this._createIntervalTask()
        }
    },
    methods: {
        async getMounted() {
            // this.$mask(this.$refs.right)
            const {
                success,
                msg,
                data
            } = await this.$ajax.get(`/helper/api/v1/datasets/mount`, {
                url: this.url,
                type: 'query'
            })
            // this.$unmask(this.$refs.right)
            if (!success) {
                this.$showErr(msg);
                return;
            }
            this.mountedList = data.list
            this.mountedTotal = data.total
        },
        async getDatasets() {
            // this.$mask(this.$refs.left)
            const url = this.searchParams.queryType === 'all' ? '/helper/api/v1/datasets/personal' : '/helper/api/v1/datasets/public';
            const {
                success,
                msg,
                data
            } = await this.$ajax.get(url, {
                ...this.searchParams,
                username: userID,
                url: this.url,
            })
            // this.$unmask(this.$refs.left)
            if (!success) {
                this.$showErr(msg);
                return;
            }
            this.datasetList = data.list;
            this.datasetTotal = data.total;
            this.$refs.pagingbar?.setTotal(data.total)
        },
        
        async getData() {
            this.getMounted();
            await this.getDatasets()
        },
        
        _createIntervalTask() {
            let vm = this;
            this.intervalTask = new IntervalTask({
                fn: () => {
                    vm.getData().then(() => {
                        vm.intervalTask && vm.intervalTask.next();
                    });
                },
                interval: 10000,
                autoStart: true
            });
        },
        changeForUpdate() {
            this.searchParams.page = 1;
            this.getDatasets();
        },
        pageChange() {
            this.getDatasets();
        },
        async _deleteMount(item) {
            this.$mask(this.$refs.right)
            const {success, msg} = await this.$ajax.post('/helper/api/v1/unmount', {
                url: this.url,
                datasets: item.data_id
            })
            this.$unmask(this.$refs.right)
            if (!success) {
                this.$showErr(msg)
                return
            }
            this.getDatasets()
            this.getMounted()
        },
        async _mountItem(item) {
            this.$mask(this.$refs.left)
            const {success, msg} = await this.$ajax.post('/helper/api/v1/mount', {
                url: this.url,
                datasets: item.data_id
            })
            this.$unmask(this.$refs.left)
            if (!success) {
                this.$showErr(msg)
                return
            }
            this.getDatasets()
            this.getMounted()
        }
    },
    beforeDestroy() {
        if (this.intervalTask) {
            this.intervalTask.stop();
            this.intervalTask = null;
        }
    }
}
</script>

<style lang="less" scoped>
.mount-dataset-page {
    height: 100%;
    padding: 0 20px;
    display: flex;
    
    &__left {
        width: 522px;
        margin-right: 45px;
        
        .mount-dataset-left__radios {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 20px;
            margin-bottom: 16px;
        }
        
        .mount-dataset-left__list {
            height: 636px;
            
            .mount-dataset-list__item {
                height: 70px;
                background-color: #ffffff;
                display: flex;
                
                .list-item__left {
                    height: 100%;
                    flex: 1;
                    width: calc(100% - 128px);
                    padding: 8px 16px;
                    
                    .item-data {
                        &__title {
                            width: 100%;
                            height: 21px;
                            font-size: 14px;
                            font-weight: 500;
                            line-height: 21px;
                            color: #3D3D3D;
                            margin-bottom: 8px;
                        }
                        
                        &__other {
                            height: 17px;
                            font-size: 12px;
                            line-height: 17px;
                            color: #86909C;
                            
                            .other-size {
                                margin-left: 128px;
                            }
                        }
                    }
                }
                
                .list-item__right {
                    height: 100%;
                    width: 128px;
                    padding: 28px 24px;
                    
                    .sfv-btn {
                        min-width: 80px;
                        width: 80px;
                    }
                }
                
                & + .mount-dataset-list__item {
                    margin-top: 12px;
                }
            }
            
            .list-paging-bar {
                display: flex;
                justify-content: space-between;
                align-items: center;
                
                .paging-bar__pager {
                    background-color: #ebedf0;
                    bottom: 0;
                    display: flex;
                    align-items: center;
                    
                    /deep/ .sfv-pager__wrapper {
                        .sfv-pager-total {
                            display: none;
                        }
                        
                        .sfv-pager__content {
                            .sfv-pager__item {
                                background-color: #ebedf0;
                                
                                &.active {
                                    color: #1c6eff;
                                }
                            }
                        }
                    }
                }
            }
        }
        
        .mount-dataset-page__alert {
            height: 34px;
            background-color: #fdf3e4;
            display: flex;
            color: #EE8800;
            
            i {
                margin-top: 10px;
                margin-left: 7px;
                margin-right: 7px;
            }
            
            .alert-text {
                width: 554px;
                height: 22px;
                font-size: 12px;
                line-height: 22px;
                margin-top: 6px;
            }
        }
    }
    
    &__right {
        width: 353px;
        max-height: 100%;
        overflow: auto;
        
        .right-title {
            height: 16px;
            font-size: 12px;
            line-height: 16px;
            color: #3D3D3D;
            display: flex;
            justify-content: flex-end;
            margin-bottom: 20px;
        }
        
        .right-list {
            height: calc(100% - 36px);
            
            &__item {
                height: 62px;
                border-bottom: 1px solid #D4D4D4;
                
                .list-item {
                    height: 100%;
                    
                    .item-data {
                        &__title {
                            height: 21px;
                            font-size: 14px;
                            line-height: 21px;
                            color: #3D3D3D;
                            margin-bottom: 8px;
                            display: flex;
                            justify-content: space-between;
                            
                            i {
                                cursor: pointer;
                                font-size: 24px;
                                margin-right: 12px;
                            }
                        }
                        
                        &__other {
                            height: 17px;
                            font-size: 12px;
                            line-height: 17px;
                            color: #86909C;
    
                            .status-text {
                                margin-left: 20px;
                                width: 88px;
                                height: 17px;
                                border-radius: 12px;
                                display: inline-flex;
                                align-items: center;
                                justify-content: center;
        
                                i {
                                    font-size: 12px;
                                    margin-right: 8px;
                                }
                            }
                            
                            .other-size {
                                margin-left: 20px;
                            }
                        }
                    }
                }
                
                
                & + .right-list__item {
                    margin-top: 12px;
                }
            }
        }
    }
}
</style>
